<template>
    <div class="app-container">
        <div class="container">
            <div class="button-bar">
                <a-button type="primary" @click="action('undo')">保存信息</a-button>
                <!-- <a-button type="default" @click="action('undo')">回撤</a-button>
                <a-button type="default" @click="action('redo')">重做</a-button> -->
                <a-button type="primary" @click="importFromTemplate()">导入模板</a-button>
                <a-button type="primary" @click="addModal()">新增节点</a-button>
                <a-button type="default" @click="action('moveUp')">上移</a-button>
                <a-button type="default" @click="action('moveDown')">下移</a-button>
                <a-button type="default" @click="action('outdent')">升级</a-button>
                <a-button type="default" @click="action('indent')">降级</a-button>
                <a-button type="default" @click="action('undo')">回撤</a-button>
                <a-button type="default" @click="action('del')">删除节点</a-button>
                <!-- <a-button type="primary" @click="action('moveBackward')">减一天</a-button>
                <a-button type="primary" @click="action('moveForward')">加一天</a-button>
                <a-button type="primary" @click='exportToPDFs'>下载PDF</a-button>
                <a-button type="primary" @click="showDrawer()">查看甘特图</a-button> -->
            </div>
            <div class="gantt-layout">
                <a-drawer
                        title=""
                        placement="right"
                        :closable="false"
                        :z-index="10"
                        :get-container="false"
                        :visible="visible"
                        :body-style="{padding:'0'}"
                        :wrap-style="{ position: 'absolute'}"
                        width="50%"
                        :after-visible-change="afterVisibleChange"
                        @close="onClose"
                ><gantt ref="ganttCom" class="left-container"
                        :columns="ganttColumns"
                        :plugins="plugins"
                        :tasks="tasks"
                        :height="661"
                        @task-deleted="deleteTask"
                        @task-updated="logTaskUpdate"
                        @link-updated="logLinkUpdate"
                        @task-addModal="addModal"
                        @task-selected="selectTask"></gantt>
                </a-drawer>
                <a-table row-key="id" :scroll="{ x: 1200, y: 600 }"
                         :columns="columns"
                         :defaultExpandAllRows="true"
                         :pagination="false"
                         :expandIconColumnIndex="2"
                         @expand="rowExpand"
                         :data-source="tableData"
                         :customRow="clickRow"
                         :row-selection="rowSelection">
                    <template slot="operation" slot-scope="text, record, index">
                        <div class="editable-row-operations">
                        <span v-if="record.editable">
                          <a @click="() => save(record.key)">Save</a>
                          <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
                            <a>Cancel</a>
                          </a-popconfirm>
                        </span>
                            <span v-else>
                          <a :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a>
                        </span>
                        </div>
                    </template>
                    <!-- 	阶段/类别 --><template slot="name" slot-scope="text, record">
                    <editable-cells
                            :value="text"
                            :text="text"/>
                </template>
                    <!-- <template slot="name" slot-scope="text, record">
                      <span v-if="record.type!=='task'">{{record.name}}</span>
                      <span v-else></span>
                      <editable-cell :text="text"
                          :autoSave=true
                          :defaultEditable="record.editable"
                          @change="onCellChange(record.key, 'name', $event)" />
                    </template> -->
                    <!-- 管控级别 -->
                    <template v-if="levelType===3" slot="duration" slot-scope="text, record">
                        <span v-if="record.level==='1'">一级节点</span>
                        <span v-if="record.level==='2'">二级节点</span>
                        <span v-if="record.level==='3'">三级节点</span>
                        <span v-else></span>
                        <editable-cell :text="text"   @change="onCellChange(record.key, 'duration', $event)" />
                    </template>
                    <!-- 周期 -->
                    <template slot="duration" slot-scope="text, record">
                        <editable-cell :text="text"   @change="onCellChangeDur(record, 'duration', $event)" />
                    </template>
                    <!-- 计划开始时间 -->
                    <template slot="startDate" slot-scope="text, record">
                        <editable-cell  :text="text"  @change="onCellChange(record.key, 'startDate', $event)" />
                    </template>
                    <!-- 计划结束时间 -->
                    <template slot="endDate" slot-scope="text, record">
                        <editable-cell :text="text"  @change="onCellChange(record.key, 'endDate', $event)" />
                    </template>
                    <!-- 完成标准 -->
                    <template slot="completeStandard" slot-scope="text, record">
                        <editable-cell v-if="record.level===1||record.level===2||record.level===3" :text="text"  @change="onCellChange(record.key, 'completeStandard', $event)" />
                    </template>
                    <!-- 验证资料 -->
                    <template slot="verifyDoc" slot-scope="text, record">
                        <editable-cell v-if="record.level===1||record.level===2||record.level===3" :text="text"  @change="onCellChange(record.key, 'verifyDoc', $event)" />
                    </template>
                    <!-- 第一责任人 -->
                    <template slot="firstResponsible" slot-scope="text, record">
                        <!-- <editable-cell v-if="record.level===1||record.level===2||record.level===3" :text="text"  @change="onCellChange(record.key, 'firstResponsible', $event)" /> -->
                        <editable-cell v-if="record.level===1||record.level===2||record.level===3" :ref="`firstResCode_${record.key}`" formType="select" :defaultEditable="record.editable" :required="true" message='请选择第一责任人' :value="record.firstResCode" :text="record.firstResponsible" >
                            <a-select-option value="01">
                                张三
                            </a-select-option>
                            <a-select-option value="02">
                                王五
                            </a-select-option>
                        </editable-cell>
                    </template>
                    <!-- 直接责任人 -->
                    <template slot="responsible" slot-scope="text, record">
                        <editable-cell v-if="record.level===1||record.level===2||record.level===3" :text="text"  @change="onCellChange(record.key, 'responsible', $event)" />
                    </template>

                </a-table>
            </div>
            <a-modal
                    :visible="addVisible"
                    ok-text="确 定 新 增"
                    cancel-text="取 消"
                    :confirm-loading="confirmLoading"
                    @ok="handleSubmit"
                    @cancel="handleCancel">
                <!--          <a-form>-->
                <!--            <div>-->
                <!--              -->
                <!--            <div style="width:100%;height:60px;background-color:#349ED8" >-->
                <!--                <div style="line-height:60px;color:#fff;font-weight:bold;font-size:16px"> 新增节点</div>-->
                <!--            </div>-->
                <!--            <a-form-item label="新增节点位置" style="display:flex;margin:20px 0">-->
                <!--              <a-select v-model="levelOption" style="width:200px" placeholder="请选择节点位置">-->
                <!--                <a-select-option label="同等级" value="1">同等级</a-select-option>-->
                <!--                <a-select-option label="下级" value="0">下级</a-select-option>-->
                <!--              </a-select>-->
                <!--            </a-form-item>-->
                <!--            </div>-->

                <!--          </a-form>  -->

                <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
                    <!--          <a-form-item label="Note">-->
                    <!--              <BaseInput-->
                    <!--                      v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"-->
                    <!--              />-->
                    <!--          </a-form-item>-->
                    <div style="width:100%;height:60px;background-color:#349ED8" >
                        <div style="line-height:60px;color:#fff;font-weight:bold;font-size:16px"> 新增节点</div>
                    </div>
                    <a-form-item label="新增节点位置">
                        <a-select
                                v-decorator="['note', { rules: [{ required: true, message: '请选择节点位置' }] }]"
                                placeholder="请选择节点位置"
                                @change="handleSelectChange"
                        >
                            <a-select-option value="1">
                                同等级
                            </a-select-option>
                            <a-select-option value="2">
                                下级
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <!--          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">-->
                    <!--              <a-button type="primary" html-type="submit">-->
                    <!--                  Submit-->
                    <!--              </a-button>-->
                    <!--          </a-form-item>-->
                </a-form>
                <!-- <a-form :form="form">
                  <a-form-item label="阶段/类别名称">
                    <a-input-group compact>
                      <BaseInput type="hidden" v-decorator="['id']"/>
                      <BaseInput style="width: 70%"
                               v-decorator="[
                    'name',
                    {
                      rules: [{ required: true, message: '请填写阶段/类别名称!' }],
                    },
                  ]"
                               placeholder="阶段/类别名称"
                      />
                      <a-select style="width: 30%"
                                @change="onTaskTypeChange"
                                v-decorator="[
                  'type',{initialValue:taskType},
                  { rules: [{ required: true, message: '类型!' }] }]">
                        <a-select-option value='project'>项目</a-select-option>
                        <a-select-option value='subproject'>阶段</a-select-option>
                        <a-select-option value='task'>任务</a-select-option>
                      </a-select>
                    </a-input-group>
                  </a-form-item>
                  <a-form-item label="管控级别" v-if="taskType==='task'">
                    <a-select
                      v-decorator="[
                  'level',
                  { rules: [{ required: true, message: '选择管控级别!' }] },]" placeholder="管控级别">
                      <a-select-option :value='1'>一级节点</a-select-option>
                      <a-select-option :value='2'>二级节点</a-select-option>
                      <a-select-option :value='3'>三级节点</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="计划日期">
                    <a-input-group compact>
                      <BaseInputNumber :formatter="value => `${value}天`"
                                      :parser="value => value.replace('天', '')" style="width: 30%"
                                      v-decorator="['duration',{initialValue:1}, rangeConfig]" @change="onDaySizeChange"/>
                      <a-range-picker
                        style="width: 70%"
                        :locale="locale"
                        @change="onChange"
                        @blur="getPeriod"
                        :placeholder="['计划开始日期','计划完成日期']"
                        v-decorator="['period', rangeConfig]"/>
                    </a-input-group>
                  </a-form-item>
                  <a-form-item label="父级节点">
                    <a-select
                      show-search
                      :filter-option="parentFilterOption"
                      v-decorator="['parent',{initialValue:''}]"
                      placeholder="选择父级节点"
                    >
                      <a-select-option value=''>无父级节点</a-select-option>
                      <a-select-option v-for="task in preTasks" :key="task.id" :value='task.id'>{{task.text}}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="前置任务">
                    <a-select
                      v-decorator="['preTask']"
                      placeholder="选择前置任务"
                      mode="multiple"
                      option-label-prop="label"
                    >
                      <a-select-option v-for="task in preTasks" :label="task.text" :key="task.id" :value='task.id'>
                        {{task.text}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form> -->
            </a-modal>
        </div>
        <task-template-modal @hide="importFromTemplateHide" @dataImport="onTemplateDataImport" :selectLevel="selectLevel"
                             :visible="taskTemplateVisible" />
    </div>
</template>
<script>
  import { gantt } from 'dhtmlx-gantt'
  import Gantt from '../gantt/gantt'
  import TaskTemplateModal from '../gantt/template-modal'
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
  import * as moment from 'moment'
  import EditableCell from '../../EditableCell'
  import EditableCells from './cell'
  export default {
    name: 'DhtmlxGantt',
    components: { Gantt, TaskTemplateModal ,EditableCell, EditableCells},
    data() {
      return {
        levelOption:'',
        // tableData:[],
        tableData: [
          // {
          //   id: 1,
          //   name: '',
          //   duration: '',
          //   type: '',
          //   startDate: '',
          // },
        ],
        startDates:'',
        locale,
        tasks: { data: [], links: [] },
        columns: [],
        rowSelection: {},
        ganttColumns:[],

        preTasks: [],
        selectLevel:'',
        taskType: 'task',
        modalTitle: '新增节点',
        confirmLoading: false,
        addVisible: false,
        visible:false,
        selectId:'',
        taskTemplateVisible: false,
        plugins: {
          undo: true,
          drag_timeline: true
        },
        messages: [],
        selectedTask: null,
        rangeConfig: {
          rules: [{ type: 'array', required: true, message: '请选择计划日期!' }]
        }
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, {})
    },
    beforeUpdate() {
      this.columns = this.getColumns()
    },
    created() {
      localStorage.removeItem('task')
      localStorage.removeItem('link')
      this.rowSelection = this.getRowSelection()
      this.columns = this.getColumns()
      this.tasks.data = []
      this.tasks.links = []
      this.ganttColumns = [
        {
          name: 'sortNum', label: '序号', align: 'center',tree: true, width: 0, template: function(obj) {
            return obj.$index + 1
          }
        }
      ]
    },
    mounted: function() {
      this.columns = this.getColumns()
    },
    methods: {
      handleSelectChange(value) {
        console.log(value);
        if(value==1){
          this.levelOption= 1
        }else if (value==2){
          this.levelOption=2
        }
        console.log(this.levelOption)
        this.form.setFieldsValue({
          note: value,
        });
      },
      clickRow(record, index){
        return {
          on: {
            click: () => {
              console.log(record,index)
              this.selectId = record.id
            }
          }
        }
      },
      onCellChange(key, dataIndex, value) {
        const dataSource = [...this.dataSource];
        const target = dataSource.find(item => item.key === key);
        if (target) {
          target[dataIndex] = value;
          this.dataSource = dataSource;
        }
      },
      onCellChangeDur(record, dataIndex, value){
        console.log(record)
        console.log(dataIndex)
        console.log(value)

        const start = record.start_date
        const endDate = gantt.calculateEndDate({
          start_date: start,
          duration: value
        })
        this.form.setFieldsValue({
          period:start.toDate()
        })


        const dataSource = [...this.dataSource];
        const target = dataSource.find(item => item.key === key);
        if (target) {
          target[dataIndex] = value;
          this.dataSource = dataSource;
        }
      },
      onClose(){
        this.visible=false
      },
      showDrawer() {
        this.visible = true;
      },
      afterVisibleChange(visible){
        if(visible){
          gantt.refreshData()
        }
      },
      getChildrenSize(p){
        let size = 0
        const getChildSize = (p)=>{
          if(p.type==='task'){
            return
          }
          p.children.forEach(c => {
            if(c.type==='task'){
              size++
            }
            getChildSize(c)
          })
        }
        getChildSize(p)
        return size
      },
      getColumns() {
        let rowIndex = 1
        return [
          {
            title: '编号',
            width: 60,
            customRender: () => {
              return rowIndex++
            }
          },
          {
            title: '阶段/类别',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' },
            width: '10%',
            // customRender: (n,row) => {
            //   if(row.type!=='task'){
            //     return row.name
            //   }else{
            //     return ''
            //   }
            // }
          },
          {
            title: '业务事项',
            dataIndex: 'matters',
            width: 100,
            customRender: (n,row) => {
              if(row.type!=='task'){
                const size = this.getChildrenSize(row)
                return `${size}个`
              }else{
                return row.matters
              }
            },
            scopedSlots: { customRender: 'matters' },
          },
          {
            title: '管控级别',
            // customRender: (record) => {
            //   switch (record.level) {
            //     case 1:
            //       return '一级节点'
            //     case 2:
            //       return '二级节点'
            //     case 3:
            //       return '三级节点'
            //     default:
            //       return ''
            //   }
            // },
            width: 100
          },
          {
            title: '周期',
            dataIndex: 'duration',
            width: 100,
            scopedSlots: { customRender: 'duration' },
          },
          {
            title: '计划开始日期',
            dataIndex: 'startDate',
            scopedSlots: { customRender: 'startDate' },
            width: 120
          },
          {
            title: '计划完成日期',
            dataIndex: 'endDate',
            scopedSlots: { customRender: 'endDate' },
            width: 120
          },
          {
            title: '完成标准',
            dataIndex: 'completeStandard',
            scopedSlots: { customRender: 'completeStandard' },
            ellipsis: true
          },
          {
            title: '验证资料',
            dataIndex: 'verifyDoc',
            scopedSlots: { customRender: 'verifyDoc' },
            ellipsis: true
          },
          {
            title: '第一责任人',
            dataIndex: 'firstResponsible',
            scopedSlots: { customRender: 'firstResponsible' },
            ellipsis: true
          },
          {
            title: '直接责任人',
            dataIndex: 'responsible',
            scopedSlots: { customRender: 'responsible' },
            ellipsis: true
          },
        ]
      },
      rowExpand(expanded, task){
        if(expanded){
          gantt.open(task.id)
        }else{
          gantt.close(task.id)
        }
      },
      getRowSelection() {
        return {
          columnWidth:40,
          type:'radio',
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedData = selectedRows
            console.log(this.selectedData)
            gantt.selectTask(this.selectedData[0].id);
          },
          onSelect: (record, selected, selectedRows) => {
            this.selectedData = selectedRows
            console.log(this.selectedData)
            this.selectLevel= this.selectedData[0].levelType
            console.log(this.selectLevel)
            gantt.selectTask(this.selectedData[0].id);
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            this.selectedData = selectedRows
            console.log("onSelectAll"+this.selectedData)
            gantt.selectTask(this.selectedData[0].id);
          }
        }
      },
      dataListToTree(dataList){
        console.log(dataList)
        const dataMaps = {}
        const tree = []
        const dataListCopy = []
        dataList.forEach(data => {
          const copy = { ...data, start_date: data.startDate }
          copy.children = []
          dataMaps[copy.id] = copy
          dataListCopy.push(copy)
        })
        dataListCopy.forEach(data => {
          if (data.parent) {
            const parent = dataMaps[data.parent]
            if (parent) {
              parent.children.push(data)
            } else {
              data.parent = null
              tree.push(data)
            }
          } else {
            tree.push(data)
          }
        })
        console.log(tree)
        return tree
      },
      resetDataId(tree) {
        let index = 1
        const resetIdDataList = []
        const readTree = (children, parentId) => {
          children.forEach(child => {
            index++
            if (parentId) {
              child.parent = parentId
            }
            if (child.children.length > 0) {
              child.id = `${new Date().getTime() + index}`
              resetIdDataList.push(child)
              readTree(child.children, child.id)
            } else {
              child.id = `${new Date().getTime() + index}`
              resetIdDataList.push(child)
            }
          })
        }
        readTree(tree, 0)
        return resetIdDataList
      },
      onTemplateDataImport(dataList) {
        console.log(dataList)
        // dataList.forEach((item)=>{
        //   console.log(this.selectLevel)
        //   if(this.selectLevel==item.levelType &&item.parent==undefined){

        //   }
        // })
        const tasks = gantt.getTaskByTime()
        const tree  = this.dataListToTree(dataList)
        dataList = this.resetDataId(tree)
        console.log(dataList)
        dataList.forEach(data => {
          console.log(this.selectLevel)
          console.log(data.levelType)
          console.log(data.parent)
          if(data.parent==undefined){
            console.log(data)
            console.log(this.selectedData)
            // gantt.addTask(this.valuesToTask(data),datta.parent,data.index ||1)
          }
          if (data.parentNames) {
            const parentNames = data.parentNames.split('{|}')
            parentNames.some(name => {
              return tasks.some(task => {
                if (task.name === name) {
                  data.parent = task.id
                  task.$open = true;
                  gantt.updateTask(task.id)
                  const childLength = gantt.getChildren(task.id).length
                  data.index = childLength + 1
                  if (!data.start_date) {
                    data.start_date = new Date()
                  }
                  return true
                }
              })
            })
          }
          console.log(this.valuesToTask(data))
          gantt.addTask(this.valuesToTask(data), data.parent, data.index || 1)
        })
        const allTasks = gantt.getTaskByTime()
        console.log(allTasks)
        console.log(this.tableData )

        this.tableData = this.dataListToTree(allTasks)
        console.log(this.tableData)
      },
      importFromTemplate() {
        console.log(this.selectLevel)
        // if(this.selectedData.length==0){
        //   this.$confirm({
        //     title: '提示！！',
        //     content: '请选中任务',
        //     okText: '确定',
        //     cancelText: '取消',
        //     onOk() {
        //       return false
        //     },
        //     onCancel() {
        //       return false
        //     },
        //   });

        // }
        this.taskTemplateVisible = true
      },
      importFromTemplateHide() {
        this.taskTemplateVisible = false
      },
      parentFilterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      onTaskTypeChange(val) {
        this.taskType = val
      },
      onChange(value, dateString) {
        const start = value[0]
        console.log(start.toDate())
        const end = value[1]
        const duration = gantt.calculateDuration({
          start_date: start.toDate(),
          end_date: end.toDate()
        })
        this.form.setFieldsValue({
          duration
        })
      },
      onDaySizeChange(value) {
        const start = this.startDates[0]
        const endDate = gantt.calculateEndDate({
          start_date: start.toDate(),
          duration: value
        })
        this.form.setFieldsValue({
          period:start.toDate()
        })
      },
      getPeriod(){
        this.startDates = this.form.getFieldValue('period')
      },
      handleCancel() {
        this.confirmLoading = false
        this.addVisible = false
      },
      valuesToTask(values) {
        return {
          id: values.id,
          text: values.matters||values.name,
          name: values.name,
          start_date: values.start_date,
          startDate:values.startDate||'',
          end_date:values.end_date,
          endDate:values.endDate||'',
          duration: values.duration,
          parent: values.parent,
          type: values.type,
          preTask: values.preTask,
          matters: values.matters,
          level: values.level,
          levelType: values.levelType,
          responsible: values.responsible,
          firstResponsible: values.firstResponsible
        }
      },
      handleSubmit() {
        this.confirmLoading = true
        // var taskId = gantt.addTask({
        //     id:10,
        //     text:"Task #5",
        //     start_date:"02-09-2013",
        //     duration:28
        // }, "project_2", 1);
        this.form.validateFields((err, values) => {
          console.log(this.selectedData)
          console.log(values)
          if (!err) {
            console.log(values)
            this.addVisible = false
            const start = this.selectedData[0].start_date
            const duration = this.selectedData[0].duration
            // const end = this.selectedData[0].start_date
            values.start_date = start
            values.duration = duration
            values.text = ' '
            // if (values.id) {
            //   const task = gantt.getTask(values.id)
            //   const vtt = this.valuesToTask(values)
            //   const taskUpdate = {...task,...vtt}
            //   gantt.updateTask(values.id, taskUpdate)
            // } else {
            console.log(this.levelOption)
            if(this.levelOption===1){
              values.id = `${new Date().getTime()}`
              gantt.addTask(this.valuesToTask(values), values.parent)
            }else if(this.levelOption===2){
              values.id = `${new Date().getTime()}`
              gantt.addTask(this.valuesToTask(values),  this.selectedData[0].id)
            }
            const allTasks = gantt.getTaskByTime()
            this.tableData = this.dataListToTree(allTasks)
            // }
            //前置任务
            // const links = gantt.getLinks()
            // links.forEach(link => {
            //   if (values.preTask.indexOf(link.source) !== -1 && link.target === values.id) {
            //     gantt.deleteLink(link.id)
            //   }
            // })
            // values.preTask.forEach(pre => {
            //   gantt.addLink({
            //     id: `${new Date().getTime()}`,
            //     source: pre,
            //     target: values.id,
            //     type: gantt.config.links.finish_to_start
            //   })
            // })
          }
        })
      },
      action(name) {
        // if('moveUp'===name){
        //   let _this = this
        //   let task_id = gantt.getSelectedId()
        //     _this.$refs.ganttCom.action(name)
        // }
        if ('del' === name) {
          let task_id = gantt.getSelectedId()
          if (!task_id) {
            this.$message.warn('请先选择要删除的节点')
            return
          }
          let _this = this
          this.$confirm({
            okText: '删除',
            okType: 'danger',
            cancelText: '取消',
            title: '删除当前选择的节点?',
            content: `将删除所选节点【${this.selectedTask.text}】及其子节点，确定要删除吗？`,
            onOk() {
              _this.$refs.ganttCom.action(name)
            },
            onCancel() {
            },
            class: 'test'
          })
        } else {
          this.$refs.ganttCom.action(name)
        }

        const allTasks = gantt.getTaskByTime()
        console.log(allTasks)
        this.tableData = this.dataListToTree(allTasks)
        console.log(this.tableData)
      },
      exportToPDFs() {
        gantt.exportToPDF({
          name: 'mygantt.pdf',
          header: '<h1>My company</h1>',
          footer: '<h4>Bottom line</h4>',
          locale: 'en',
          start: '01-04-2013',
          end: '11-04-2013',
          skin: 'terrace',
          data: {}
        })
      },
      addModal(task) {
        if(this.selectedTask==null){
          this.$confirm({
            title: '提示！！',
            content: '请选中任务',
            okText: '确定',
            cancelText: '取消',
            onOk() {
              return false
            },
            onCancel() {
              return false
            },
          });
          return false
        }
        this.confirmLoading = false
        const tasks = gantt.getTaskByTime()
        let parent = gantt.getSelectedId()
        // if (task) {
        //   if (task.id) {
        //     this.preTasks = tasks.filter(t => t.id !== task.id)
        //     this.modalTitle = '编辑节点'
        //   } else {
        //     this.preTasks = tasks
        //     this.modalTitle = '新增节点'
        //   }
        //   this.form = this.$form.createForm(this, {})
        //   parent = task.parent
        // } else {
        //   this.preTasks = tasks
        //   this.modalTitle = '新增节点'
        //   this.form = this.$form.createForm(this, {})
        // }
        this.addVisible = true
        // if (task) {
        //   console.log(task)
        //   this.$nextTick(() => {
        //     this.taskType = task.type
        //     const period = [moment(task.start_date), moment(task.end_date)]
        //     this.form.setFieldsValue({
        //       id: task.id,
        //       name: task.name,
        //       period,
        //       level: task.level,
        //       type: task.type,
        //       duration: task.duration,
        //       parent: task.parent ? task.parent : ''
        //     })
        //   })
        // } else if (parent) {


        console.log(parent)
        // this.taskType = 'task'
        // this.$nextTick(() => {
        //   setTimeout(()=>{
        //     this.form.setFieldsValue({
        //       parent,
        //       type: 'task'
        //     })
        //   },0)
        // })
        // }
      },

      selectTask: function(task) {
        console.log('当前选中行数据:', task)
        this.selectedTask = task
        gantt.selectTask(task.id);
      },
      deleteTask: function(taskId) {
        console.log('当前删除的数据：', taskId)
      },
      addMessage(message) {
        let _this = this
        _this.messages.unshift(message)
        if (_this.messages.length > 40) {
          _this.messages.pop()
        }
      },
      logTaskUpdate(id, mode, task) {
        const text = (task && task.text ? ` (${task.text})` : '')
        const message = `Task ${mode}: ${id} ${text}`
        this.addMessage(message)
      },
      logLinkUpdate(id, mode, link) {
        let message = `Link ${mode}: ${id}`
        if (link) {
          message += ` ( source: ${link.source}, target: ${link.target} )`
        }
        this.addMessage(message)
      }
    }
  }
</script>

<style scoped>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    /deep/ .ant-pro-basicLayout-children-content-wrap{
        flex:1;
    }
    .gantt-layout{
        position: relative;
    }
    /deep/ .ant-table-thead th{
        height: 60px;
        line-height: 60px;
        padding: 0;
    }
    /deep/ .ant-table-placeholder{
        height: 600px;
    }
    /deep/ .gantt-layout .ant-table-body{
        min-height: 600px;
    }
    /deep/ .ant-drawer-content-wrapper{
        box-shadow: none !important;
    }
    /deep/ .ant-table-selection-column{
        width:40px;
    }

    .button-bar {
        margin-bottom: 10px;
    }

    .button-bar > button:not(:first-child) {
        margin-left: 10px;
    }
    /deep/ .ant-modal-body{
        padding:0
    }
</style>
